/* color system */
/* 
1 327b8e
2 79c4c7
3 646385
4 4e3e58
5 81a29b
 */

body{
font-family: 宋体,雅黑;
font-size:1.0em;
/*max-width: 2600px;*/
/* min-width: 540px; */
word-wrap: break-word; 
background: #fdf8f0;
margin: 0 auto;

}

body > .ym-wrapper{min-height: 400px;}
body a{color: #0044AA; text-decoration:underline;}
header{margin:0px; width: 100%; }
header nav a{color: white}
footer,footer a, header nav {background:  #327b8e; color: white; margin: 0px; padding: 5px; border1: 2px solid #f83525;}
header nav ul{list-style: none; margin: 0px; padding: 0px; display:block; float: left;height1: 30px; border1: 1px solid red;}
header nav ul li{display: block; float: left; }
header nav ul li a{text-decoration: none; font-size: 1.3em;display: block; padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}
nav li.active a, header nav ul li a:hover{text-decoration: none; font-size: 1.3em; display: block; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; background: #fdf8f0;color: black;}
header nav .searchform{float: right; display: block; margin:5px; border1: 1px solid white;}
.searchfield{width: 10em;}
#div-logo{color: #327b8e}
#div-logo img{
border: 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#first_title{font-size: 3em; color: #327b8e; }
div#subscribe{margin:15px 20px 0 0;}
footer{margin:0px;text-align: center; clear:both; width:100%; font-size:0.9em;}
#should-use-better-browser{height1: 20px; clear: both; 1width: 50%; 1padding: 10px;1margin: 0px auto; font-size: 1em; background: #E48181;color1: white;}

.wrapper{border1: 1px solid red; min-width: 100%; max-width:1200px; margin: 0 auto; padding: 10px;}
header .wrapper{padding: 0px;}

/* .ym-wrapper{border: 2px solid blue;} */
.main-info-box{width1: 90%; min-height: 400px;margin:0 10px 10px 0; border1: 1px solid black;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.div-info-body{width: 80%; float: left; margin:20px 0 20px 20px; border1: 1px solid red}
.div-info-body {border1: 1px solid blue;}
.div-info-body table{width: 100%; border1: 1px solid blue;}
.div-info-body table .version, .div-info-body table .gender{width: 2.2em}
.div-info-body table .name{min-width: 4em; _width: 4em}
.div-info-body table .birth{min-width: 4em; _width: 4em}
.div-info-body table .region{min-width: 3em; _width: 3em}
.div-info-body table .state,
.div-info-body table .op{min-width: 4em; _width: 4em}
.div-info-body table .op div{_width: 4em}
.div-info-body table .type{min-width: 3em; _width: 3em}
.div-info-body table .date{min-width: 4em; _width: 4em}
.div-info-body table td.event{min-width: 200px; _width: 200px; width: 200px; word-wrap: word;}
.crumbs{display: block; margin: 10px;}
.page-title{margin: 0 auto; text-align: center;}

/* login section */
#div-login{margin: 50px auto; width: 650px; border1: 1px solid black}
#div-user-login{float: left}
#div-user-login tr{height: 40px;background: #fdf8f0;}

#oauth-login{float: left; margin-left: 50px; border-left: 2px solid gray; padding: 0 0 30px 50px;}
#oauth-login a{margin: 5px 10px; display: block; width: 135px;}
.login-hint{float: left; width: 100px;}
.left{float: left}
.right{float: right}
.clear{clear: both}
.bold{font-weight: bold;}
.horizontal-center{margin: 0 auto;}

.error, .hint-error{color: red;}
.warnning{color: #fb6a00; font-size: 1.4em; }
.response{color: green;font-size: 1.4em;}

/* #main{max-width: 1200px; } */
.ym-cbox{float: left}

/* non-canvas style */
.figure{float: left; height: 100px; border1: 1px solid black}
#more-latest-users img, #latest-users img, .figure img, .figure-img, .member img{display1: block; 
width: 50px; height: 50px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; border: 0px}
.a-to-home{font-size: 0.8em; margin-top:5px; display: block; width: 55px;}
.blood-relative{font-weight: bold;}
.in-law{color: black;}
.root{margin: 0 auto }
.tree{float: left; margin: 10px 0 0 10px; padding-bottom: 5px;border-top1: 1px solid green;}

1div{border: 1px solid black;
-moz-box-sizing: border-box;
box-sizing: border-box;}
1div.clear{border: 1px solid red;}

.person_info dt{float: left; width: 8em; margin-top: 10px;text-align: right}
.person_info dd, .person_info dd label{1float: left; margin-top: 10px;}
section#address{1background: gray;}
section#name{background: #ffe5e5;}
section#address{background1: gray;}

/* family tree */

#family-tree{ margin:10px 20px; position: relative;}
.xxx{
border:2px solid gray; 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
box-sizing: border-box;
-moz-box-shadow: 2px 2px 2px gray; 
-webkit-box-shadow: 2px 2px 2px gray;
box-shadow: 2px 2px 2px gray;
}

div.affiliate{margin: 20px 0 0 20px}
#box-family .box{float: left; background: #fdf8f0}

#canvas, #canvas_top, #canvas_mid{
    margin:0px;
    padding: 0px;
    float: left;
    position: absolute;
    border1: 1px solid red;
}
#canvas{z-index:2; }
#canvas_mid{z-index:1;}
#canvas_top{z-index:3;}
/* slide */
#aside{float: left; 1max-width: 960px; min-width: 20%;margin-left: 10px; }
#div-hot-public{border1: 1px solid red; padding: 10px; width: 50%; float: left;max-width: 800px;}
.hot-figure-title, .my-figure-title{}
.hot-figure, .hot-family{margin: 20px 0 0 15px;}

#home_wrapper{max-width: 1024px; margin:0 auto; 1border: 1px solid black;}
#latest-users{border1: 1px solid black; 1width: 40%; float: left; }
#latest-users ul{list-style: none; float: left;margin: 0px; padding:0px; }
#more-latest-users ul{list-style: decimal}
#more-latest-users ul li{float: left; width: 350px;}
.1a-to-home{font-size: 0.8em; margin-top:5px; display: block; width: 55px;}
.div-title{border1: 1px solid black;}
.div-title .a-more{vertical-align: middle;margin-top: 15px;}

.word-wrap{word-wrap: break-word; overflow:hidden;}

.width-50px{width:80px; }

/* add-people/register/add relation */
/* register */
#register{margin: 10px 0;}
form.add-people{list-style: none}
.div-form-line{height: 40px;  clear: both}
.div-form-label{width: 12%;  min-width: 60px;float: left; word-wrap: break-word; text-align: right}
.div-form-input{width: 10em; float: left; margin-left: 10px;}
.div-form-input input, .div-form-input select{width: 100%;}
.div-form-input input[type=radio]{width: 20%;}
.div-form-input label{width: 200px;;}
.div-input-hint{width: 15em; float: left; margin-left: 10px; word-wrap: break-word; color: gray; }

div.line{background: #CC3333;}

/* in people search  */
#div-search{margin: 10px;}
#div-search select {width: 100px;}
.dl-in-search{float1: left; margin-top: 10px;}
.dl-in-search dt, .dl-in-search dd{float: left; }
.dl-in-search dd{float: left; width: 80px; margin-top:15px;1height: 50px;1line-height: 50px; }

/* .dl-in-search .dt-figure,  */
.dl-in-search .dt-figure img{width: 50px; height: 50px;margin: 0px}
.dl-in-search .name{width: 10em;}
.dl-in-search .birth{width: 10em;}
.dl-in-search .region{width: 15em;}

/* add possible relation */
.dl-possible-rel{margin-left: 10em; border-bottom: 1px solid #4e3e58}
.dl-possible-rel dt, 
.dl-possible-rel dd{float: left; }
.dl-possible-rel dt{width: 16em;}
.div-possible-rel{}

#possible-col1, #possible-col3{width: 300px;}
#possible-col3{float: right}
#possible-col2{width: 300px; margin-left: 300px;}

.second-level-nav{float: left;}
.second-level-nav ul{list-style: none; margin: 0px;background: #327b8e; color: white; }
.second-level-nav li{margin:7px 10px 5px 0px; padding-left: 0px;}
.second-level-nav a{display:block;color: white; }
.second-level-nav a:hover{background: #FAEAD1;color: #0044AA}

#div-base-info{float: left; width1: 80%;}
.dl-base-info, .dl-family{float: left; width: 10em;margin: 0px 0 0 20px;border1: 1px solid black}
.dl-base-info dt, .dl-family dt{float: left; width1: 60px; }
.dl-base-info dt, .dl-base-info dd,
.dl-family dt, .dl-family dd{margin: 0px;border1: 1px solid blue;}
.dl-family dd{display: block; }
.dl-family dd div{width1: 80%; float: left; margin:0px; padding: 0px; border1: 1px solid red;}
.dl-family .home-members{float: left}

.dl-family{float: left; width1: 40%; border1: 1px solid black}

/* event */
#div-event{margin-top: 30px;}
#div-event dl{margin-top: 10px; border-bottom1: 1px solid gray; width: 100%;}
#div-event dl:nth-child(odd){background: #FAEAD1}
#div-event dl{background: expression(this.rowIndex%2==0 ? "#FAEAD1":"white")};
#div-event dl dt{float: left; width: 10%;  1display: block; }
#div-event dl dd{float: right; width: 85%; 1display: block; }

/* add event */
#dl-add-event, #dl-edit-event{width1: 50%;margin-top: 1px; margin-left1: 20%; border1: 1px solid black}
#dl-add-event dt, #dl-edit-event dt{float: left}
#dl-add-event textarea, #dl-edit-event textarea{width: 80%; height: 150px;}

/* add photo */
#div-upload-photo{margin: 0 auto; width1: 60%; }
.ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); background: #646385;}
#progress{}
#progressbar{height: 30px; margin-top:10px;}

img.photo_preview{width: 100px;}

div.photo{margin: 10px 1px; text-align: center}
.change_photo_wall{margin: 10px 0 10px 0; text-align:center; clear:both; font-size: 1.2em}
.change_photo_wall button{font-size: 1.2em}
.photo-in-wall{
    border: 5px solid white;
    max-width: 360px;
    max-height: 160px;
    　　width:auto!important;
    　　width:360px;
}
table caption{margin: 10px;}
table#surnames{border: 2px solid gray; margin: 10px auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cellspacing: 0;
cellpadding: 0;
}
table tr td{border-collapse: collapse}
table tr:nth-child(odd){background: #FAEAD1}
table tr{background: expression(this.rowIndex%2==0 ? "#FAEAD1":"white")};

table#surnames tr{height: 30px; border-top: 1px solid gray;}
table#surnames tr td{padding: 0px; margin:0px;width1: 40px; border1: 1px solid black}
div.surname{width: 120px; margin: 5px 0;}

/* edit figure */
.div-edit-figure-img{float: left; margin: 10px 0 0 20px;}
.div-edit-figure-img:hover{border: 1px solid blue; }
/* galley */
#gallery{width:90%; margin: 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid gray}

img.guide{width: 500px; border: 2px solid gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dl-guide dt{font-weight: bold; margin-top:10px;}
/* request message page */
#div-msg-box dl dt{width: 20%; float: left}
#div-msg-box dl dd{float: left}
#div-msg-box dl{border-bottom: 1px solid black}
#div-msg-box{width: 60%; margin: 30px 0 0 30px;}

/* .div-request  */
a.back{margin-left: 20px;}
.bookmarks{margin-top: 10px;}
.bookmarks .left a{margin-left: 10px;}
.bookmarks a{float: left}

ul#links li{margin-top: 5px;}
/* family manage */
#div-family{width: 60%; border: 1px solid black}
#family-links{float: right}
#family-list tr:nth-child(odd){background: #79c4c7}
#family-list td{min-width: 60px;}
#family-list .num{min-width: 2em; _width: 2em}
#family-list .name{min-width: 6em; _width: 6em; }
#family-list .region{min-width: 3em; _width: 3em; }
#family-list .notes{min-width: 50%; max-width: 60%; }
#dl-family-info dt{float: left; width: 10%; text-align: right}
#dl-family-info dd{margin-left: 20px;}

form textarea1{width: 260px; height: 100px;}

.button {
   border-top: 1px solid #c98383;
   background: #edb2b2;
   background: -webkit-gradient(linear, left top, left bottom, from(#ed111f), to(#edb2b2));
   background: -webkit-linear-gradient(top, #ed111f, #edb2b2);
   background: -moz-linear-gradient(top, #ed111f, #edb2b2);
   background: -ms-linear-gradient(top, #ed111f, #edb2b2);
   background: -o-linear-gradient(top, #ed111f, #edb2b2);
   padding: 5.5px 11px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fcfcfc;
   font-size: 17px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #bd3d3d;
   background: #bd3d3d;
   color: #f2dcdc;
   }
.button:active {
   border-top-color: #b00606;
   background: #b00606;
   }

/* ************************* */
/* auto clear */
.dl-possible-rel:after, 
.dl-in-search:after,
#div-event dl:after,
#div-base-info dd:after,
#div-msg-box dl:after,
#div-add-event dl dd:after,
#dl-family-info dd:after,
.dl-family dd:after,
.person_info dd:after,
#dl-login dd:after,
.dl-base-info dd:after
{
    content: ".";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

*html .dl-possible-rel,
*html .dl-in-search,
*html #div-event dl,
*html #div-base-info dd,
*html #div-msg-box dl,
*html .dl-family dd,
*html .person_info dd,
*html #dl-login dd,
*html .dl-base-info dd
{height: 1%;} /* auto clear float for IE 6 */

*:first-child+html .dl-possible-rel,
*:first-child+html .dl-in-search,
*:first-child+html #div-event dl,
*:first-child+html #div-base-info dd,
*:first-child+html #div-msg-box dl,
*:first-child+html .dl-family dd,
*:first-child+html .person_info dd,
*:first-child+html #dl-login dd,
*:first-child+html .dl-base-info dd
{min-height: 1px;} /*auto clear float for IE7 */

